<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./css/base.css">
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./font_xwua9519rnq/iconfont.css">
    <title>Document</title>
</head>

<body>
    <div class="main_viewport">
        <div class="top_search">
            <span class="iconfont icon-sousuo"></span>
            <input type="text" placeholder="搜索：目的地/酒店/景点/航班号">
        </div>
        <!-- 内容区域 -->
        <div class="content">
            <ul>
                <li>
                    <a href="#"><img src="./img/1.png" alt="">
                        <p>酒店</p>
                    </a>
                </li>
                <li>
                    <a href="#"><img src="./img/2.png" alt="">
                        <p>民宿/客栈</p>
                    </a>

                </li>
                <li>
                    <a href="#"><img src="./img/3.png" alt="">
                        <p>美食</p>
                    </a>

                </li>

            </ul>
            <ul>
                <li>
                    <a href="#"><img src="./img/4.png" alt="">
                        <p>机票</p>
                    </a>

                </li>
                <li>
                    <a href="#"><img src="./img/5.png" alt="">
                        <p>航班助手</p>
                    </a>

                </li>
                <li>
                    <a href="#"><img src="./img/6.png" alt="">
                        <p>接送机/包车</p>
                    </a>

                </li>

            </ul>
            <ul>
                <li>
                    <a href="#"><img src="./img/7.png" alt="">
                        <p>火车票</p>
                    </a>

                </li>
                <li>
                    <a href="#"><img src="./img/8.png" alt="">
                        <p>汽车/船票</p>
                    </a>

                </li>
                <li>
                    <a href="#"><img src="./img/9.png" alt="">
                        <p>租车</p>
                    </a>

                </li>

            </ul>
            <ul>
                <li>
                    <a href="#"><img src="./img/10.png" alt="">
                        <p>旅游</p>
                    </a>

                </li>
                <li>
                    <a href="#"><img src="./img/11.png" alt="">
                        <p>门票/活动</p>
                    </a>

                </li>
                <li>
                    <a href="#"><img src="./img/12.png" alt="">
                        <p>周边游</p>
                    </a>

                </li>

            </ul>
            <ul>
                <li>
                    <a href="#"><img src="./img/13.png" alt="">
                        <p>攻略/景点</p>
                    </a>

                </li>
                <li>
                    <a href="#"><img src="./img/14.png" alt="">
                        <p>购物/免税</p>
                    </a>

                </li>
                <li>
                    <a href="#"><img src="./img/15.png" alt="">
                        <p>借钱/分期</p>
                    </a>

                </li>

            </ul>

        </div>

        <!-- 主体区域 -->
        <div class="top_Box">
            <div class="left_box">
                <div class="title">
                    <img src="./img/t1.png" alt="">
                    <span>特价好货直播中</span>
                </div>
                <div class="middle">
                    <img src="./img/1mc3y12000bhw655k6679_D_280_280_R5.jpg" alt="">
                    <div class="text">美豪雅致酒店（杭州）1晚</div>
                    <p>¥1799</p>
                </div>
            </div>
            <div class="right_box">
                <div class="title">
                    <img src="./img/0zc6g120008g0hcb587E5.png" alt="">
                    <span>权威排行榜</span>
                </div>
                <div class="middle">
                    <img src="./img/1mc1z12000ae1jqliA6CE_R_238_268.jpg" alt="">
                    <img src="./img/1111.jpg" alt="">

                </div>
                <div class="bot_item">
                    <p><span>豪华酒店榜</span>
                        <span>亲子乐园酒店榜</span>
                    </p>

                </div>

            </div>

        </div>
        <!-- 底部区域 -->
        <div class="bot_box">
            <img src="./img/b1.jpg" alt="">
        </div>
        <div class="footer">
            <div class="top">
                <a href="#"><span class="iconfont icon-dianhua"></span>电话预定</a>
                <a href="#"><span class="iconfont icon-xiazai"></span>下载携程</a>
            </div>
            <div class="bot">
                <a href="#">网站地图</a>
                <!-- <div class="line"></div> -->
                <a href="#">电脑版</a>
                <p>©2025携程旅行
                    <span>沪ICP备08023580号</span>
                </p>

            </div>
        </div>

        <div class="bot_nav left">
            <div class="item one">
                <a href="#">
                    <span class="bg"></span>
                    <p>首页</p>
                </a>
            </div>
             <div class="item two">
                <a href="./zhequ.html">
                    <span class="bg"></span>
                    <p>社区</p>
                </a>
            </div>
             <div class="item three">
                <a href="#">
                    <span class="bg"></span>
                    <p>消息</p>
                </a>
            </div>
             <div class="item four">
                <a href="#">
                    <span class="bg"></span>
                    <p>我的</p>
                </a>
            </div>

        </div>
    </div>
</body>

</html>